<template>
  <div style="padding: 0 20px" id="conter">
      <!-- 导航栏部分 -->
    <div style="background-color: rgb(84, 92, 100); margin-bottom: 10px" >
     <div style="text-align: center">
      <el-row :gutter="20" style="padding: 10px 10px">
                <!-- 搜索框 -->
                <el-input
                  v-model="searchFrom.keywords"
                  size="small"
                  style="width: 260px"
                  placeholder="通过名称、别名搜索..."
                ></el-input>
                <!-- 搜索按钮 -->
                <el-button
                  size="small"
                  type="primary"
                  icon="el-icon-search"
                  @click="searchInformationByKeyWord()"
                >搜索</el-button>
       </el-row>
     </div>
    </div>
    <span class="zjbutton" @click="gotoIndex">返回首页</span>
    <div>
        <el-card v-for="(item,index) in datalist" :key="index" style="display: inline-block;width: 24%;margin-right: 10px" :body-style="{ padding: '0px' }">
          <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">
          <div style="padding: 4px;">
            <span>{{item.name}}</span>
            <div class="bottom clearfix">
              <div class="time">{{ item.feature }}</div>
            </div>
          </div>
          <el-button type="text" style="padding: 5px" @click="gotoDatail(item)" class="button">查看详情</el-button>
        </el-card>
    </div>
  </div>
</template>

<script>
export default {
    name: 'SelectData',
    data () {
      return {
        searchFrom:{
          keywords:''
        },
        datalist:[]
      }
    },
  methods: {
    isEmpty (value) {
      if (typeof value === 'undefined') {
        return true
      } else if (value === null) {
        return true
      } else if (typeof value === 'string' && value === '') {
        return true
      } else if (typeof value === 'number' && isNaN(value)) {
        return true
      } else if (Array.isArray(value) && value.length === 0) {
        return true
      } else if (value instanceof Number && isNaN(value)) {
        return true
      } else if (
        value.toString() === '[object Object]' &&
        Object.keys(value).length === 0
      ) {
        return true
      } else {
        return false
      }
    },
    // 搜索按钮请求后端
    searchInformationByKeyWord () {
      if (this.isEmpty(this.searchFrom.keywords)) {
        this.$message.warning('请输入关键词')
        return
      }
      var _this = this
      this.$axios
        .post('/search', {
          keywords: this.searchFrom.keywords
        })
        .then(({data}) => {
          if (this.isEmpty(data.data.list)) {
            this.$message.warning('未查找到该信息！')
            return
          }
          this.datalist=data.data.list
        })
    },
    gotoIndex(){
      this.$router.push({name: 'AppIndex'})
    },
    gotoDatail(data){
      this.$router.push({ name: 'SelectDetail', query: {detail:data,list:this.datalist,key:this.searchFrom.keywords,type:'selectDate'} })
    }
    },
  mounted() {
    this.datalist=this.$route.query.list
    this.searchFrom.keywords=this.$route.query.key
    console.log(this.$route);
  }
}
</script>
<style scoped>
  .zjbutton:hover{
    color: #409eff;
    cursor: pointer;
  }
  #conter .bottom .time {
    font-size: 13px;
    color: #999;
    width: 100%;
    height: 34px;
    line-height: 18px;
  }

  .bottom {
    margin-top: 13px;
    line-height: 12px;
    overflow: hidden;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 30%;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }
</style>
